<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>每一点</title>

    <!-- Css (necessary Css) -->
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/bootstrap.min.css')}"
          media="all">
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/bootstrap-theme.css')}"
          media="all">
    <link rel="stylesheet"
          th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/language-selector-remove-able-css.css')}"
          media="all">
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/flexslider.css')}"
          media="all">
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/style.css')}" media="all">
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/plugin.css')}" media="all">
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/menu.css')}" media="all">
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/responsive.css')}"
          media="all">
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/color.css')}" media="all">
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/iconmoon.css')}"
          media="all">
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/themetypo.css')}"
          media="all">
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/widget.css')}" media="all">
    <link rel="icon" th:href="${@mvcResourceUrlProvider.getForLookupPath('/ep/images/favicon.ico')}"
          type="image/x-icon"/>

    <!-- jQuery (necessary JavaScript) -->
    <script type="text/javascript"
            th:src="${@mvcResourceUrlProvider.getForLookupPath('/assets/scripts/jquery.js')}"></script>
    <script type="text/javascript"
            th:src="${@mvcResourceUrlProvider.getForLookupPath('/assets/scripts/bootstrap.min.js')}"></script>
    <script th:src="${@mvcResourceUrlProvider.getForLookupPath('/layui/layui.js')}"></script>
    <script th:src="${@mvcResourceUrlProvider.getForLookupPath('/ep/js/common/common.js')}"></script>
    <script type="text/javascript"
            th:src="${@mvcResourceUrlProvider.getForLookupPath('/assets/scripts/modernizr.js')}"></script>
    <script type="text/javascript"
            th:src="${@mvcResourceUrlProvider.getForLookupPath('/assets/scripts/menu.js')}"></script>
    <script type="text/javascript"
            th:src="${@mvcResourceUrlProvider.getForLookupPath('/assets/scripts/jquery.flexslider-min.js')}"></script>
    <script type="text/javascript"
            th:src="${@mvcResourceUrlProvider.getForLookupPath('/assets/scripts/functions.js')}"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>

    <![endif]-->

</head>
<body style="overflow:-Scroll;overflow-x:hidden">
<div class="wrapper">
    <!-- Header -->
    <div th:replace="../templates/ep/front/crowd/header :: main-header"></div>
    <!-- Header -->
    <!-- Banner   -->
    <div th:replace="../templates/ep/front/crowd/banner :: main-banner"></div>
    <!-- Banner   -->

    <!-- Main Content -->
    <main id="main-content">
        <div class="main-section">
            <div class="page-section">
                <div class="container">
                    <div>
                        <a target="_blank" href="#" class="read-more cscolor">查看更多 <i class="icon-play cscolor"></i></a>
                    </div>
                    <div class="row">
                        <div class="section-fullwidth col-lg-12">
                            <div class="cs-content-holder">
                                <div class="row">
                                    <aside class="page-sidebar col-lg-3">
                                        <div class="widget cs_directory_categories">
                                            <div class="widget-section-title">

                                            </div>
                                            <ul class="menu">
                                            </ul>
                                        </div>
                                    </aside>
                                    <div class="page-content col-lg-9">
                                        <div class="listing_grid">
                                            <div class="row">

                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
    <!--// Main Content //-->

    <!--// CopyRight //-->
    <div th:replace="../templates/ep/front/crowd/footer :: footer"></div>
    <!--// CopyRight //-->

</div>
<script th:inline="javascript">
    function toCollection(projectId) {
        $.ajax({
            url: "/web/saveUserCollectionProject",
            type: "post",
            data: {"projectId": projectId},
            success: function (data) {
                if (data.code == 401){
                    window.location.href = "/web/common/login";
                }
                if (data.code == 500){
                    layer.msg(data.message)
                }
                if (data.code == 200){
                    layer.msg(data.message)
                    $("#toCollect"+projectId+"").addClass("hidden")
                    $("#toDeletCollect"+projectId+"").removeClass("hidden")
                }

            },
            error:function (data) {
            }
        })
    }
    function toDeletCollection(projectId) {
        $.ajax({
            url: "/web/deleteUserCollectionProject",
            type: "post",
            data: {"projectId": projectId},
            success: function (data) {
                if (data.code == 500){
                    layer.msg(data.message)
                }
                if (data.code == 200){
                    layer.msg(data.message)
                    $("#toCollect"+projectId+"").removeClass("hidden")
                    $("#toDeletCollect"+projectId+"").addClass("hidden")
                }

            }
        })
    }
    jQuery(window).load(function () {
        jQuery('.flexslider').flexslider({
            animation: "slide",
            controlNav: false,
            prevText: "<em class='icon-arrow-left10'></em>",
            nextText: "<em class='icon-arrow-right10'></em>",
            start: function (slider) {
                jQuery('body').removeClass('loading');
            }
        });
    });
    //Demo
    layui.use(['form', 'layer', 'laydate', 'util'], function () {
        let form = layui.form
            , layer = layui.layer
            , laydate = layui.laydate
            , util = layui.util;

        initMenu();
        initIndexShow();

        // 分类菜单
        function initMenu() {
            $.ajax({
                url: "/web/common/getProjectTypeAndCount",
                type: "get",
                success: function (data) {
                    var list = data.data.data;
                    var countNum = data.data.countNum;
                    var str = "<li><a href=\"#\"><i class=\"icon-sort-amount-desc cscolor\"></i>全部</a> <span>" + countNum + "</span></li>";
                    // 分类菜单
                    $(".widget-section-title").html("<h4><i class=\"icon-globe4\"></i>" + list.length + "个类别</h4>")
                    for (var i = 0; i < list.length; i++) {
                        var jsonValue = JSON.parse(list[i].jsonValue)
                        str += "<li><a href=\"#\"><i class=\"" + jsonValue.class + "\"></i>" + list[i].name + "</a> <span>" + list[i].count + "</span></li>"
                    }
                    $(".menu").html(str);

                }
            })

        }

        //首页展示
        function initIndexShow() {
            $.ajax({
                url: "/web/common/getIndexShow",
                type: "post",
                success: function (data) {
                    var data = data.data;
                    var str = "";
                    console.log(data);
                    for (var i = 0; i < data.length; i++) {
                        str += "<article class=\"col-lg-4 col-md-4 col-sm-6\">\n" +
                            "                                                    <div class=\"directory-section\">\n" +
                            "                                                        <div class=\"cs_thumbsection\">\n" +
                            "                                                            <figure><a href=\"/web/project_info?projectId="+data[i].projectId+"\"><img  src=\"/" + data[i].ad + "\" alt=\"\"></a></figure>\n" +
                            "                                                        </div>\n" +
                            "                                                        <div class=\"content_info\">\n" +
                            "                                                            <div class=\"title\">\n" +
                            "                                                                <h3><a href=\"#\">" + data[i].shortTitle + "</a></h3>\n" +
                            "                                                            <div class=\"dr_info\">\n" +
                            "                                                                <ul>\n" +
                            "                                                                    <li> <i class=\"cscolor icon-target5\"></i>目标:" + data[i].goal + "</li>\n" +
                            "                                                                    <li> <i class=\"cscolor icon-clock7\"></i>" + data[i].fundBegin + "</li>\n" +
                            "                                                                </ul>\n" +
                            "                                                                <span class=\"bar\"><span style=\"width:" + toPercentShow(data[i].raiseGoal, data[i].goal) + ";\"></span></span>\n" +
                            "                                                                <div class=\"detail\"> <span class=\"fund\">" + toPercent(data[i].raiseGoal, data[i].goal) + "</span> <a style='cursor: pointer' id='toCollect"+data[i].projectId+"' onclick=\"toCollection(" + data[i].projectId + ")\" class=\"star icon-star\"></a>" +
                            "<a style='cursor: pointer' id='toDeletCollect"+data[i].projectId+"' onclick=\"toDeletCollection(" + data[i].projectId + ")\" class=\"star icon-star cscolor hidden\"></a> </div>\n" +
                            "                                                            </div>\n" +
                            "                                                        </div>\n" +
                            "                                                    </div>\n" +
                            "                                                </article>";
                    }
                    $(".listing_grid div").html(str);
                    for (var i = 0; i < data.length; i++) {
                        if (data[i].collectionFlag){
                            $("#toCollect"+data[i].projectId+"").addClass("hidden")
                            $("#toDeletCollect"+data[i].projectId+"").removeClass("hidden")
                        }
                    }

                }
            })
        }

        // 计算进度条
        function toPercentShow(num, total) {
            if (Math.round(num / total * 10000) > 10000) {
                return (100 + "%");// 小数点后两位百分比
            }
            return (Math.round(num / total * 10000) / 100.00 + "%");// 小数点后两位百分比

        }

        // 计算比例
        function toPercent(num, total) {

            return (Math.round(num / total * 10000) / 100.00 + "%");// 小数点后两位百分比

        }


    });


</script>

</body>
</html>